import Base from '@/components/Base';
import {
  Button,
  Card,
  Form,
  Radio,
  Input,
  Badge,
  Select,
  Table,
  Modal,
  message,
  Popover,
  Typography,
} from 'antd';
import { KayButton, View } from '@/components/KayUI';
import styles from './index.less';
import ButtonShining from '@/components/KayUI/ButtonShining';

const { Title, Paragraph, Text } = Typography;

interface State {}
export default class Index extends Base<any, State> {
  public state: State = {};

  public async didShow() {}

  public async didMount() {
    // console.log('history', this.navigator.history)
  }

  public render() {
    const {} = this.state;
    return (
      <div>
        <View style={{ alignItems: 'center', padding: '60px 0 80px' }}>
          <ButtonShining />
        </View>

        <Typography>
          <Paragraph>
            <div className="codeBox">
              <p>{`@property --angle {`}</p>
              <p>
                {this.renderSpace(1)}
                {`syntax: "<angle>";`}
              </p>
              <p>
                {this.renderSpace(1)}
                {`initial-value: 145deg;`}
              </p>
              <p>
                {this.renderSpace(1)}
                {`inherits: false;`}
              </p>
              <p>{`}`}</p>
              <p>{`@keyframes rotateAni {`}</p>
              <p>
                {this.renderSpace(1)}
                {`0% {`}
              </p>
              <p>
                {this.renderSpace(2)}
                {`--angle: 0deg;`}
              </p>
              <p>
                {this.renderSpace(1)}
                {`}`}
              </p>
              <p>
                {this.renderSpace(1)}
                {`100% {`}
              </p>
              <p>
                {this.renderSpace(2)}
                {`--angle: 360deg;`}
              </p>
              <p>
                {this.renderSpace(1)}
                {`}`}
              </p>
              <p>{`}`}</p>
              <p>
                {this.renderSpace(1)}
                {`background-image: linear-gradient(var(--angle), #cd0ad9, #8006de, #4982e9 90%);`}
              </p>
              <p>
                {this.renderSpace(1)}
                {`animation: rotateAni 2.5s linear infinite;`}
              </p>
            </div>
          </Paragraph>
          <Paragraph>
            <p>
              利用
              <Text code>@property</Text>
              自定义css属性； 并通过
              <Text code>animation</Text>
              控制该属性变化
            </p>
          </Paragraph>
        </Typography>
      </div>
    );
  }
  private renderSpace = (num: number) => {
    const str = '\b\n\b\n\b\n\b\n';
    let res = '';
    for (let i = 0; i < num; i++) {
      res += str;
    }
    return res;
  };
}
